/*
  学习目标：实现评论列表
  需求
    1：✅列表展示功能
    2. ✅发表评论功能
    3. ✅删除一条评论
    4. ✅清空评论功能
*/

import React from 'react';
import './index.css';
export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    //  1.1 声明state.list 数组
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '思聪2',
        content: '想你的夜2',
      },
      {
        id: 3,
        username: '思聪3',
        content: '想你的夜3',
      },
    ],
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = (e) => {
    // 阻止默认行为
    e.preventDefault();
    // 2.5 判断非空
    if (!this.state.username.trim() || !this.state.content.trim()) return alert('别乱写');
    // 2.3 直接添加数据到list
    this.setState({
      list: [
        {
          id: Date.now(),
          username: this.state.username,
          content: this.state.content,
        },
        ...this.state.list,
      ],
      // 2.4 清空state中旧的输入内容
      username: '',
      content: '',
    });
  };

  // 3.2 声明删除方法handleDel，绑定时传参id
  handleDel = (id) => {
    // 3.3 删除逻辑
    this.setState({ list: this.state.list.filter((item) => item.id !== id) });
  };

  // 4.2 handleClear 中setState清空list
  handleClear = () => {
    this.setState({ list: [] });
  };

  render() {
    const { username, content } = this.state;
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        {/*  2.1 表单元素改成受控组件 - 为了能够收集用户输入的数据 */}
        <form onSubmit={this.handleSubmit}>
          <input
            className="user"
            type="text"
            placeholder="请输入评论人"
            value={username}
            name="username"
            onChange={this.handleChange}
          />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
            value={content}
            name="content"
            onChange={this.handleChange}
          />
          <br />
          {/* 2.2 给发表按钮，绑定onClick  */}
          <button>发表评论</button>
          {/* 4.1 绑定onClick事件与handleClear */}

          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        {
          // {/* 4.3 根据list的长度，判断是否为空*/}
          !this.state.list.length ? (
            <div>暂无数据</div>
          ) : (
            <ul>
              {/* 1.2. 通过this.state.list.map去生成JSX到ul>li结构中 */}
              {this.state.list.map((item) => {
                return (
                  // 1.3. 🔔注意设置key
                  <li key={item.id}>
                    <h3>评论人: {item.username}</h3>
                    <p>评论内容：{item.content}</p>
                    {/* 3.1 绑定onClick事件 */}
                    <button onClick={() => this.handleDel(item.id)}>删除</button>
                  </li>
                );
              })}
            </ul>
          )
        }
      </div>
    );
  }
}
